import 'package:flutter/material.dart';

class ReaderTopControls extends StatelessWidget {
  final String chapterTitle;
  final VoidCallback onBack;
  final VoidCallback onMore;
  final VoidCallback? onTitleTap; // 添加标题点击回调

  const ReaderTopControls({
    super.key,
    required this.chapterTitle,
    required this.onBack,
    required this.onMore,
    this.onTitleTap, // 可选参数
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.black.withOpacity(0.7),
            Colors.transparent,
          ],
        ),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: Row(
            children: [
              IconButton(
                icon: const Icon(Icons.arrow_back, color: Colors.white),
                onPressed: onBack,
              ),
              Expanded(
                child: GestureDetector(
                  onTap: onTitleTap,
                  child: Text(
                    chapterTitle,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              IconButton(
                icon: const Icon(Icons.library_books, color: Colors.white),
                onPressed: onTitleTap,
              ),
              IconButton(
                icon: const Icon(Icons.more_vert, color: Colors.white),
                onPressed: onMore,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ReaderBottomControls extends StatelessWidget {
  final int imageInChapter;
  final int totalInChapter;
  final double sliderValue;
  final bool canGoPrevious;
  final bool canGoNext;
  final bool isAutoReading;
  final Function(double) onSliderChanged;
  final Function(double) onSliderChangeStart;
  final Function(double) onSliderChangeEnd;
  final VoidCallback onPreviousChapter;
  final VoidCallback onNextChapter;
  final VoidCallback onShowChapterList;
  final VoidCallback onToggleAutoReading;

  const ReaderBottomControls({
    super.key,
    required this.imageInChapter,
    required this.totalInChapter,
    required this.sliderValue,
    required this.canGoPrevious,
    required this.canGoNext,
    required this.isAutoReading,
    required this.onSliderChanged,
    required this.onSliderChangeStart,
    required this.onSliderChangeEnd,
    required this.onPreviousChapter,
    required this.onNextChapter,
    required this.onShowChapterList,
    required this.onToggleAutoReading,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [
            Colors.black.withOpacity(0.8),
            Colors.transparent,
          ],
        ),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 进度显示
              Text(
                '$imageInChapter/$totalInChapter',
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 12),

              // 进度条和章节导航
              Row(
                children: [
                  // 上一章按钮
                  IconButton(
                    icon: const Icon(Icons.keyboard_arrow_left,
                        color: Colors.white, size: 32),
                    onPressed: canGoPrevious ? onPreviousChapter : null,
                  ),

                  // 进度条
                  Expanded(
                    child: SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        activeTrackColor: const Color(0xFF8A2BE2),
                        inactiveTrackColor: Colors.white.withOpacity(0.3),
                        thumbColor: const Color(0xFF8A2BE2),
                        overlayColor: const Color(0xFF8A2BE2).withOpacity(0.2),
                        trackHeight: 4.0,
                        thumbShape: const RoundSliderThumbShape(
                            enabledThumbRadius: 8.0),
                      ),
                      child: Slider(
                        value: sliderValue,
                        min: 1,
                        max: totalInChapter.toDouble(),
                        divisions:
                            totalInChapter > 1 ? totalInChapter - 1 : null,
                        onChanged: onSliderChanged,
                        onChangeStart: onSliderChangeStart,
                        onChangeEnd: onSliderChangeEnd,
                      ),
                    ),
                  ),

                  // 下一章按钮
                  IconButton(
                    icon: const Icon(Icons.keyboard_arrow_right,
                        color: Colors.white, size: 32),
                    onPressed: canGoNext ? onNextChapter : null,
                  ),
                ],
              ),

              // 底部功能按钮
              const SizedBox(height: 8),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                    icon: const Icon(Icons.menu, color: Colors.white),
                    onPressed: onShowChapterList,
                  ),
                  // IconButton(
                  //   icon: const Icon(Icons.brightness_6, color: Colors.white),
                  //   onPressed: () {},
                  // ),
                  // IconButton(
                  //   icon: const Icon(Icons.crop_free, color: Colors.white),
                  //   onPressed: () {},
                  // ),
                  IconButton(
                    icon: Icon(
                      isAutoReading ? Icons.pause : Icons.play_arrow,
                      color: isAutoReading
                          ? const Color(0xFF8A2BE2)
                          : Colors.white,
                    ),
                    onPressed: onToggleAutoReading,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
